package com.example.chinesechess.presentation.ui.screen

import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.material3.*
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.unit.dp
import androidx.navigation.NavController
import com.example.chinesechess.R
import com.example.chinesechess.presentation.ui.Screen

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun OnlineScreen(navController: NavController) {
    // Room ID state for joining
    val roomIdInput = remember { mutableStateOf("") }
    
    // Mock list of rooms
    val rooms = remember {
        listOf(
            "房间1 (2/2)",
            "房间2 (1/2)",
            "房间3 (1/2)",
            "房间4 (0/2)"
        )
    }
    
    Scaffold(
        topBar = {
            TopAppBar(
                title = { Text(stringResource(R.string.menu_online_game)) },
                navigationIcon = {
                    IconButton(onClick = { navController.popBackStack() }) {
                        // Replace with actual back icon
                        Text("<")
                    }
                }
            )
        }
    ) { padding ->
        Column(
            modifier = Modifier
                .fillMaxSize()
                .padding(padding)
                .padding(16.dp),
            horizontalAlignment = Alignment.CenterHorizontally,
            verticalArrangement = Arrangement.Top
        ) {
            // Create Room Button
            Button(
                onClick = { 
                    // Create a room and navigate to game
                    navController.navigate(Screen.Game.route + "/online") 
                },
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(bottom = 16.dp)
            ) {
                Text(text = stringResource(R.string.online_create_room))
            }
            
            // Join Room Section
            OutlinedTextField(
                value = roomIdInput.value,
                onValueChange = { roomIdInput.value = it },
                label = { Text(stringResource(R.string.online_room_id)) },
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(bottom = 8.dp)
            )
            
            Button(
                onClick = { 
                    // Join the specified room and navigate to game
                    navController.navigate(Screen.Game.route + "/online") 
                },
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(bottom = 24.dp)
            ) {
                Text(text = stringResource(R.string.online_join_room))
            }
            
            // Room List
            Text(
                text = stringResource(R.string.online_room_list),
                style = MaterialTheme.typography.titleMedium,
                modifier = Modifier
                    .align(Alignment.Start)
                    .padding(bottom = 8.dp)
            )
            
            LazyColumn(
                modifier = Modifier
                    .fillMaxWidth()
                    .weight(1f)
            ) {
                items(rooms) { room ->
                    Card(
                        modifier = Modifier
                            .fillMaxWidth()
                            .padding(vertical = 4.dp),
                        onClick = { 
                            // Join this room and navigate to game
                            navController.navigate(Screen.Game.route + "/online") 
                        }
                    ) {
                        Text(
                            text = room,
                            modifier = Modifier.padding(16.dp)
                        )
                    }
                }
            }
        }
    }
} 